<template>
  <v-container fluid fill-height>
    <v-row fill-height>
      <v-col cols="9">
        <v-card width="100%" height="100%" flat>
          <v-card-title v-text="'直播'" />
          <v-list-item>
            <video
              width="90%"
              height="90%"
              id="live"
              controls
              autoplay
              class="ma-4"
            />
          </v-list-item>
          <v-list-item>
            <v-text-field
              class="mx-2"
              hide-details
              label="直播名"
              outlined
              v-model="name"
            />
          </v-list-item>
          <v-list-item>
            <v-btn color="primary" text @click="loadLive()">连接</v-btn>
          </v-list-item>
        </v-card>
      </v-col>
      <v-col cols="3">
        <ChatWindow />
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import flvjs from "flv.js";
import ChatWindow from "../components/ChatWindow.vue";
const baseUrl = "https://gkzhb.top:7210/live?port=1935&app=live&stream=";
export default {
  components: {
    ChatWindow
  },
  data: () => ({
    name: "",
    flvPlayer: null
  }),
  methods: {
    loadLive() {
      const element = document.getElementById("live");
      if (null != this.flvPlayer) {
        this.flvPlayer.unload();
        this.flvPlayer.detachMediaElement();
        this.flvPlayer.destroy();
        this.flvPlayer = null;
      }
      this.flvPlayer = flvjs.createPlayer({
        enableWorker: false,
        type: "flv",
        isLive: true,
        url: baseUrl + this.name
      });
      this.flvPlayer.attachMediaElement(element);
      this.flvPlayer.load();
      this.flvPlayer.play();
    }
  }
};
</script>
